<template>
  <div id="app">

    <router-view />
    <div style="height: 8vh;" v-show="$route.meta.isShowNavbar">
      <van-tabbar v-model="active" active-color="red" v-show="$route.meta.isShowNavbar" route >
        <van-tabbar-item icon="home-o" :to="$path.INDEX">首页</van-tabbar-item>
        <van-tabbar-item icon="search" :to="$path.LIST">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o" :to="$path.SHOPCAR">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" :to="$path.PERSON">个人</van-tabbar-item>
      </van-tabbar>
    </div>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        active: this.$path.HOME
      }
    },
  }
</script>

<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    display: flex;
    flex-flow: column;

  }
  #app,html,body{
    width: 100vw;
    height: 100vh;
  }

  * {
    padding: 0;
    margin: 0;
  }

  img {
    vertical-align: middle;
  
    width: 100%;

  }

  ul,
  ol {
    list-style: none;
  }

  a {
    text-decoration: none;
    color: #000000;
  }

  div {
    box-sizing: border-box;
  }

  li {
    cursor: pointer;
    /* transition: all .5s; */
  }

  input {
    outline: none;
    box-sizing: border-box;
  }

  button {
    outline: none;
    cursor: pointer;
  }
</style>